<template>
  <el-dialog
    title="选择房源的所属资产"
    v-model="state.dialogVisible"
    width="782px"
    class="housingSelectAssetDialogPage"
    center
    :close-on-click-modal="false"
  >
    <div class="headBox">
      <el-form
        :inline="true"
        :model="state.searchForm"
        class="demo-form-inline"
      >
        <el-form-item label="">
          <el-input
            v-model="state.searchForm.searchVal"
            placeholder="根据资产名称搜索"
            :prefix-icon="Search"
            clearable
            onkeydown="if (event.keyCode===13){return false;}"
          />
        </el-form-item>
        <el-button
          color="#BABDFF"
          style="width: 88px; height: 30px; color: #fff"
          type="primary"
          @click="doSearch"
          >搜索</el-button
        >
      </el-form>
    </div>
    <el-table :data="state.tableData" border v-loading="tableLoadingFlag">
      <el-table-column prop="index" label="序号" width="100" align="center" />
      <el-table-column
        prop="assetsName"
        label="资产名称"
        align="center"
      />
      <el-table-column label="操作" width="100" align="center" fixed="right">
        <template #default="scope">
          <el-button plain color="#FF7B50" @click="doSelect(scope.row)"
            >选择</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import {
  ElForm,
  ElFormItem,
  ElTable,
  ElTableColumn,
  ElDialog
} from "element-plus";
import { Search } from "@element-plus/icons-vue";
import { housingApi } from "@/api/assets";

const state = reactive({
  dialogVisible: false,
  tableData: [],
  searchForm: {
    searchVal: "",
  },
});
const tableLoadingFlag = ref(false);
const initTableData = () => {
  tableLoadingFlag.value = true;
  housingApi.getAssetsList(state.searchForm.searchVal).then((res) => {
    const { code, data, msg } = res;
    if (code == 200) {
      state.tableData = data.map((n, i) => {
        n.index = i + 1;
        return n;
      });
      tableLoadingFlag.value = false;
    }
  });
};
const doSearch = () => {
  initTableData();
};

// 向父组件传值
const emits = defineEmits(["getAssetsInfo"]);
const doSelect = (row) => {
  let obj = {
    assetsId: row.assetsId,
    assetsName: row.assetsName,
  };
  emits("getAssetsInfo", obj);
  state.dialogVisible = false;
};

// 开启弹窗
const open = () => {
  initTableData();
  state.dialogVisible = true;
};

defineExpose({ open });
</script>

<style lang="scss" scoped></style>
<style lang="scss" scoped>
.housingSelectAssetDialogPage {
  .headBox {
    .demo-form-inline {
      display: flex;
      .el-form-item {
        width: 60%;
        margin-right: 8px;
        .el-form-item__content {
          .el-input {
            .el-input__wrapper {
              height: 30px;
              border-radius: 6px;
            }
          }
        }
      }
    }
  }
  .el-dialog__header {
    padding-top: 18px;
    padding-bottom: 0;
    .el-dialog__title {
      font-size: 16px;
      font-weight: 500;
      color: #1a1a1a;
      font-family: SourceHanSansMedium;
    }
  }
  .el-dialog__body {
    padding-top: 25px;
    .el-table .el-table__header-wrapper .el-table__header .el-table__cell {
      padding: 20px 0;

      background: #f7f7fa;
      .cell {
        font-weight: 400;
        color: #4d4d4d;
      }
    }
  }
}
</style>
